<template>
  <div class="passwordManagement p-[30px]">
    <div class="flex justify-between">
      <span class="font-bold">开启/关闭多端登录</span
      ><span class="name"
        ><van-icon
          name="location-o"
          class="mr-[5px]"
        />当前位置：账户安全-安全设置-设置多端登录</span
      >
    </div>
    <el-divider />
    <div class="mt-[10px] flex flex-col justify-center">
      <div class="div-top p-[30px]">
        <div class="flex items-center">
          <img class="block w-[120px]" alt="Vue logo" src="~@/assets/5.png" />
          <div class="flex flex-col ml-[20px]">
            <span class="text-[20px]">多端登录</span>
            <span
              >欢迎您!超级管理员，此模块可开启/关闭您的多台终端设备登录，默认开启状态，若关闭会导致最新一次登录将逼退以往所有登录账号。</span
            >
          </div>
        </div>
      </div>
      <div class="mt-[30px] flex justify-center">
        <el-form
          ref="ruleFormRef"
          style="width: 600px; text-align: center"
          :model="formData"
          :rules="rules"
          label-width="auto"
          size="default"
        >
          <el-form-item label="是否开启多端登录：">
            <el-radio-group v-model="formData.isOpen">
              <el-radio value="0">关闭</el-radio>
              <el-radio value="1">开启</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- <el-button type="primary" @click="submitForm(ruleFormRef)">
            保存
          </el-button> -->
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import type { FormInstance, FormRules, ElMessage } from "element-plus";
interface RuleForm {
  isOpen: string;
}

const ruleFormRef = ref<FormInstance>();
const formData = ref<RuleForm>({
  isOpen: "1"
});
const rules = reactive<FormRules<RuleForm>>({
  isOpen: [{ required: true, message: "", trigger: "blur" }]
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessage.success("保存成功");
    } else {
      // ElMessage.error("保存失败，请重试");
    }
  });
};
</script>

<style lang="scss" scoped>
.passwordManagement {
  height: 100%;
  background-color: var(--color-main-background-secondary);
  .name {
    color: var(--color-main-text);
  }
  .div-top {
    width: 100%;
    background-color: #f7f9ff;
  }
}
</style>
